<template>
	<view class="w-100">
		<view class="tab-list fixed-top bg-white">
			<view class="flex-1 row-ac mx-2 mt-3 pb-2">
				<view class="row-a-j-fc flex-1" v-for="(item,index) in tabList" :key="index">
					<view class="icon-box row" :style="'background-color:' + item.bgcolor">
						<view class="iconfont" :class="item.icon"></view>
					</view>
					<view class="font-s-3 mt-1">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<view class="flex-1" :style="'height:' + tabHeight + 'px;'"></view>
		<view class="flex-1 mt-4 mx-2">
			<view class="flex-1 row-ac" v-for="(item,index) in messagesList" :key="index" @click="tapMessages(item)">
				<view class="promoter-headimg">
					<image :src="item.promoter_headimg" mode="" v-if="item.type == 1" />
					<image src="https://test.createbei.com/files/common/extractgoldcoins.png" mode="" v-if="item.type == 5" />
					<image :src="item.follower_headimg" mode="" v-if="item.type == 8" />
					<image src="https://test.createbei.com/files/common/image/head_img.jpg" mode="" v-if="item.type == 9" />
					<view class="msg-read" v-if="!item.is_read"></view>
				</view>
				<view class="flex-1 ml-2 row-ac py-3 border-bottom">
					<view class="flex-1">
						<view class="font-s-45" v-if="item.type == 1">{{ item.promoter_nickname || item.promoter_name  }}</view>
						<view class="font-s-45" v-if="item.type == 5">金币奖励</view>
						<view class="font-s-45" v-if="item.type == 8">关注消息</view>
						<view class="font-s-45" v-if="item.type == 9">邀请新用户</view>
						<view class="font-s-35 text-light-muted mt-1 in1line mr-2 in1line mr-1">{{ item.content }}</view>
					</view>
					<view class="font-s-3 text-light-muted">{{ item.created_time }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		usermessagesListUrl,
		usermessagesPatchUrl
	} from '@/api/index.js'
	import {
		nowFormatTime,
	} from '@/utils/time.js';
	export default {
		data() {
			return {
				tabHeight:'',
				tabList:[
					{
						id:0,
						name:'回复我',
						icon:'icon-yijianfankui',
						bgcolor:'#7E72FF'
					},
					{
						id:1,
						name:'@我',
						icon:'icon-aite',
						bgcolor:'#60AEFD'
					},
					{
						id:2,
						name:'点赞我',
						icon:'icon-like-01',
						bgcolor:'#FEC063'
					}
				],
				messagesList:[],
				from:{
					is_read:false
				},
				queryInfo: {
					page: 1,
					page_size: 10
				},
				messagesTotal:''
			}
		},
		mounted() {
			uni.createSelectorQuery()
				.in(this)
				.select('.tab-list')
				.boundingClientRect(data => {
					this.tabHeight = data.height;
					console.log(this.tabHeight);
				})
				.exec();
		},
		onLoad() {
			this.token = uni.getStorageSync('token')
			if (this.token != '') {
				this.getMessagesList()
			} else {
				uni.navigateTo({
					url: '/pages/public/login',
				});
			}
			
		},
		onShow() {
			this.token = uni.getStorageSync('token')
			if (this.token != '') {
				this.getMessagesList()
			} else {
				uni.navigateTo({
					url: '/pages/public/login',
				});
			}
		},
		onReachBottom() {
			this.onReachBottomHandle();
		},
		onPullDownRefresh(){
			this.token = uni.getStorageSync('token')
			if (this.token != '') {
				this.getMessagesList()
			} else {
				uni.navigateTo({
					url: '/pages/public/login',
				});
			}
			uni.stopPullDownRefresh()
		},
		methods:{
			getMessagesList() {
				this.$R.get(usermessagesListUrl, this.queryInfo).then(res => {
					if (res.code == 200) {
						this.messagesList = res.data.list
						this.messagesList = res.data.list.map(item => {
							item.created_time = nowFormatTime(item.created_time); // 格式化时间
							return item;
						});
						this.messagesTotal = res.data.total
					}
				})
			},
			tapMessages(item){
				console.log(item);
				if(item.type == 1){
					uni.navigateTo({
						url: '/pages/article/article-text?articleId=' + item.article,
					})
					this.from.is_read = true
					this.$R.patch(usermessagesPatchUrl + item.id + '/',this.from).then(res=>{
						console.log(res.msg);
					})
				}else if(item.type == 5){
					uni.navigateTo({
						url: '/pages/user/data/integral-detail?integralId=' + item.integral,
					})
					this.from.is_read = true
					this.$R.patch(usermessagesPatchUrl + item.id + '/',this.from).then(res=>{
						console.log(res.msg);
						this.getMessagesList()
					})
				}else if(item.type == 8){
					this.from.is_read = true
					this.$R.patch(usermessagesPatchUrl + item.id + '/',this.from).then(res=>{
						console.log(res.msg);
						this.getMessagesList()
					})
				}else if(item.type == 9){
					this.from.is_read = true
					this.$R.patch(usermessagesPatchUrl + item.id + '/',this.from).then(res=>{
						console.log(res.msg);
						this.getMessagesList()
					})
				}
			},
			onReachBottomHandle(){
				if (this.messagesTotal != this.messagesList.length) {
					this.queryInfo.page_size += 10;
					this.getMessagesList()
				}
			},
			onTabItemTap(e) {
				this.getMessagesList()
			},
			
		}
	}
</script>

<style lang="scss">
	.icon-box{
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
		.iconfont{
			font-size: 58rpx;
			color: #fff;
		}
	}
	.promoter-headimg{
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		position: relative;
		image{
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
		}
		.msg-read{
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			background-color: red;
			position: absolute;
			top: 10rpx;
			right:-10rpx
		}
	}
</style>